﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泸州油纸伞</title>
    <link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
<!-- videobox began -->
<div class="videobox">
        <header>
            <div class="con">
                <section class="left"></section>
                <section class="right">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                </section>
            </div>
        </header>
        <nav>
            <ul>
                <li class="left">
                    <a class="one" href="#">
                        <img src="images/sanxian.png" alt="">
                        <span>选项</span>
                        <img src="images/sanjiao.png" alt="">
                    </a>
                    <aside>
                        <span></span>
                        <ol class="zuo">
                            <li class="con">油纸伞产品分类</li>
                            <li>>彩印类</li>
                            <li>>手绘类</li>
                            <li>>植物标本类</li>
                            <li>>石板印刷类</li>
                            <li class="con">油纸伞功能分类</li>
                            <li>>装饰吊顶</li>
                            <li>>户外庭院</li>
                            <li>>婚庆</li>
                            <li class="con">油纸伞节日礼物</li>
                            <li>>节节高升</li>
                            <li>>团圆美满</li>
                            <li>>平安宝福</li>					
                        </ol>
                        <ol class="you">
                            <li class="con">油纸伞介绍</li>
                            <li>>认识油纸伞</li>
                            <li>>油纸伞历史</li>
                            <li>>工艺特色</li>
                            <li>>文化内涵</li>
                            <li class="con">热门搜索</li>
                            <li>>摄影专用</li>
                            <li>>遮阳伞</li>
                            <li>>影视同款</li>
                            <li>>舞蹈</li>						
                        </ol>
                        <img src="images/tu1.jpg" alt="">
                    </aside>
                </li>
                <li class="center">
                    <form>
                    <input type="text" value="请输入商品名称、品牌或编号">
                    </form>
                </li>
                <li class="right">
                    <a href="#">&#xe65e;</a>
                    <a href="#">&#xe608;</a>
                    <a href="#">&#xf012a;</a>
                    <a href="#">&#xe68e;</a>
                </li>
            </ul>
        </nav>
        <video src="video/home_loop_720p.mp4" autoplay loop muted></video>
        <audio src="audio/buguniao.mp3" autoplay loop></audio>
        <div class="pic">
            <p>第二批国家级非物质文化遗产名录（The second batch of national intangible cultural heritage list）</p>
            <ul>
                <li class="one"><span>&#xe662;</span>STANDARD标准</li>
                <li class="two"><span>&#xe662;</span>HD高清</li>
            </ul>
        </div>
</div>
<!-- videobox end -->
<!-- classic began -->
<div class="classic">
    <header>
        <img src="images/new.png" alt="">
    </header>
    <p>采用安全无镉丙烯颜料，性质稳定，不易褪色</p>
    <ul>
        <li>
            <hgroup>
                <h2>白玉兰-油纸伞</h2>
                <h2>加厚油纸，天然桐油</h2>
                <h2></h2>
                <h2></h2>
            </hgroup>
        </li>
        <li>
            <hgroup>
                <h2>桃花-油纸伞</h2>
                <h2>加厚油纸，天然桐油</h2>
                <h2></h2>
                <h2></h2>
            </hgroup>
        </li>
        <li>
            <hgroup>
                <h2>幽兰山谷-油纸伞</h2>
                <h2>加厚油纸，天然桐油</h2>
                <h2></h2>
                <h2></h2>
            </hgroup>
        </li>
    </ul>
</div>
<!-- classic end -->
<!-- try began -->
<div class="try">
	<header>
		<img src="images/gongyi.png" alt="">
	</header>
	<p>300年工艺传承，独具精工匠心，108道工序</p>
	<ul>
		<li>
			<img class="zheng" src="images/try1.jpg" alt="">
			<img class="fan" src="images/try4.jpg" alt="">
		</li>
		<li>
			<img class="zheng" src="images/try2.jpg" alt="">
			<img class="fan" src="images/try5.jpg" alt="">
		</li>
		<li>
			<img class="zheng" src="images/try3.jpg" alt="">
			<img class="fan" src="images/try6.jpg" alt="">
		</li>
	</ul>
</div>
<!-- try end -->
<!-- make began -->
<div class="make">
	<header>
		<img src="images/pinpai.png" alt="">
	</header>
	<p>我们更专业 用户更放心</p>
	<ul>
		<li>
			<img  class="tu" src="images/cp1.jpg" alt="">
			<img class="tihuan" src="images/th1.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp2.jpg" alt="">
			<img class="tihuan" src="images/th2.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp3.jpg" alt="">
			<img class="tihuan" src="images/th3.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp4.jpg" alt="">
			<img class="tihuan" src="images/th4.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp5.jpg" alt="">
			<img class="tihuan" src="images/th5.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp6.jpg" alt="">
			<img class="tihuan" src="images/th6.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp7.jpg" alt="">
			<img class="tihuan" src="images/th7.png" alt="">
		</li>
		<li>
			<img class="tu" src="images/cp8.jpg" alt="">
			<img class="tihuan" src="images/th8.png" alt="">
		</li>
	</ul>
</div>
<!-- make end -->
<!-- biaodan began -->
<footer>
	<div class="logo"></div>
	<div class="message">
		<form>
			<ul class="left">
				<li>
					<p><label for="">姓名：</label></p>
					<input type="text">
				</li>
				<li>
					<p>邮箱：</p>
					<input type="email">
				</li>
				<li>
					<p>电话：</p>
					<input type="tel" pattern="^\d{11}$" title="请输入11位数字">
				</li>
				<li>
					<p>密码：</p>
					<input type="password">
				</li>
				<li>
					<input class="but" type="submit" value="">
				</li>
			</ul>
			<div class="right">
				<p>留言：</p>
				<textarea></textarea>
			</div>
		</form>
	</div>
</footer>
<!-- biaodan end -->
<!-- banquan began -->
<div class="banquan">
    <a href="#">泸州油纸伞 独具匠心 工艺传承</a>
</div> 
<!-- banquan end -->
</body>
</html>
